<template>
<div ref= "wrapper">
    <div>
        <div v-for= "(item, index) in firstTitle" :key= "index">
            <!-- 这里如果把class放在上面，会导致副标题和主标题重叠 -->
            <div class= "detail-first-title border-bottom">
                <span class="item-title-icon"></span>{{item.title}}
            </div>
            <!-- 组件自调用循环渲染,在下面继续写元素有问题-->
            <div v-if= "item.children" class= "detail-second-title border-bottom">
                <detail-list :firstTitle= "item.children"></detail-list>
            </div>
        </div>
    </div>
</div>
</template>
<script>
import axios from 'axios'
export default {
    name: 'detail-list',
    props: {
        firstTitle: Array
    }
}
</script>
<style lang="stylus" scoped>
@import '../../../assets/styles/varibles.styl';/* 不能写在url中 */
*
    box-sizing border-box
    padding 0
    margin 0
    .detail-first-title
        font-size .32rem
        height .6rem
        line-height .6rem
        .item-title-icon
            position: relative
            left: .06rem
            top: .06rem
            display: inline-block
            width: .36rem
            height: .36rem
            background: url(http://s.qunarzz.com/piao/image/touch/sight/detail.png) 0 -.45rem no-repeat
            margin-right: .1rem
            background-size: .4rem 3rem
    .detail-second-title
        padding-left .4rem
</style>
